<template>
  <div class="mobile-detail">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="reportDetail.checkNo"
          name="checkNo"
          label="检查号"
          required
          placeholder="检查号"
          :rules="[{ required: true, message: '请填写检查号' }]"
          input-align="right"
          @blur="funsave"
        />
        <van-field
          v-model="reportDetail.name"
          name="name"
          label="患者姓名"
          required
          placeholder="患者姓名"
          :rules="[{ required: true, message: '请填写患者姓名' }]"
          input-align="right"
          @blur="funsave"
        />
      </van-cell-group>
      <van-field
        name="sex"
        label="性别"
        required
        :rules="[{ required: true, message: '请选择性别' }]"
        input-align="right"
      >
        <template #input>
          <van-radio-group v-model="reportDetail.sex" direction="horizontal">
            <!-- <van-radio :name="item.value" v-for="(item,index) in (pageConfig?pageConfig.sex:[])" :key="index">{{item.value}}</van-radio> -->
            <van-radio :name="item.value" v-for="(item,index) in (pageConfig)" :key="index">{{item.label}}</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="reportDetail.age"
        name="age"
        label="年龄"
        type="number"
        required
        placeholder="年龄"
        :rules="[{ required: true, message: '请填写患者年龄' },
     
      ]"
        input-align="right"
        @blur="funsave"
      >
        <template #button>
          <van-button @click.stop="agesPicker=true" size="small" type="info" icon="arrow-down">{{ageTypetext}}</van-button>
        </template>
      </van-field>
      <van-field
        name="ishospitalization"
        label="是否住院"
        required
        :rules="[{ required: false, message: '请选择是否住院' }]"
        input-align="right"
      >
        <template #input>
          <van-radio-group
            v-model="reportDetail.ishospitalization"
            direction="horizontal"
          >
            <van-radio name="否">否</van-radio>
            <van-radio name="是">是</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="reportDetail.hospitalNo"
        name="hospitalNo"
        label="住院号"
        required
        placeholder="住院号"
        :rules="[{ required: false, message: '请填写住院号' }]"
        input-align="right"
        @blur="funsave"
      />
      <!-- <van-field
        v-model="reportDetail.bedNo"
        name="bedNo"
        label="床号"
        required
        placeholder="床号"
        :rules="[{ required: false, message: '请填写床号' }]"
        input-align="right"
        @blur="funsave"
      /> -->
      <!-- 后端说没有 -->
      <!-- <van-field
        v-model="reportDetail.weight"
        name="weight"
        label="体重(KG)"
        type="number"
        required
        placeholder="体重"
        :rules="[{ required: false, message: '请填写体重' }]"
        input-align="right"
        @blur="funsave"
      /> -->
      <van-field
        v-model="reportDetail.bodyParts"
        name="bodyParts"
        label="检查部位"
        required
        placeholder="检查部位"
        :rules="[{ required: false, message: '请填写检查部位' }]"
        input-align="right"
        @blur="funsave"
      />
      <!-- 暂无 -->
      <!-- <van-field
        v-model="reportDetail.idCard"
        name="idCard"
        label="身份证号"
        placeholder="身份证号"
        :rules="[{ required: false, message: '请填写身份证号' },
    
        ]"
        input-align="right"
        @blur="funsave"
      /> -->
      <!-- urgencyDegree -->
      <van-field
        name="isEmergency"
        label="是否紧急"
        required
        :rules="[{ required: false, message: '请选择是否紧急' }]"
        input-align="right"
      >
        <template #input>
          <van-radio-group
            v-model="reportDetail.urgencyDegree"
            direction="horizontal"
          >
            <van-radio :name="0">否</van-radio>
            <van-radio :name="1">是</van-radio>
          </van-radio-group>
        </template>
      </van-field>
        <!-- 后端说没有 -->
      <!-- <van-field
        v-model="reportDetail.mobile"
        name="mobile"
        label="患者电话"
        placeholder="患者电话"
        :rules="[{ required: false, message: '请填写患者电话' }
     
       ]"
        input-align="right"
        @blur="funsave"
      /> -->

      <!-- modality -->
      <van-field
        readonly
        clickable
        required
        name="modality"
        :value="checkTypetext"
        label="检查类型"
        placeholder="检查类型"
        :rules="[{ required: false, message: '请选择检查类型' }]"
        @click="showPicker=true"
        right-icon="arrow-down"
        input-align="right"

      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit">
          保存
        </van-button>
      </div>
    </van-form>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="checktypelist"
        value-key="label"
        @confirm="onConfirm"
        @cancel="showPicker = false"
        input-align="right"
      />
    </van-popup>
    <van-popup v-model="agesPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="agetypelist"

         value-key="label"
        @confirm="onConfirm1"
        @cancel="showPicker = false"
        input-align="right"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  Toast,
  Dialog,
  Tab,
  Tabs,
  ActionSheet,
  Tag,
  Button,
  Field,
  List,
  Cell,
  CellGroup,
  Form,
  Picker,
  Radio,
  RadioGroup,
  Popup,
} from "vant";
import { getdate1 } from "@/utils/utils";
export default {
  name:'mobileDetail',
  components: {
    [Dialog.Component.name]: Dialog.Component,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [ActionSheet.name]: ActionSheet,
    [Tag.name]: Tag,
    [Button.name]: Button,
    [Field.name]: Field,
    [List.name]: List,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Form.name]: Form,
    [Picker.name]: Picker,
    [Radio.name]: Radio,
    [RadioGroup.name]: RadioGroup,
    [Popup.name]: Popup,
  },
  filters: {
    formDate: (val) => {
      console.log(val);
      return getdate1(val);
    },
  },
  data: function () {
    return {
      reportDetail: {},
      showPicker:false,
      agesPicker:false,
      checkTypetext:'',
      checktypelist:[],
      agetypelist:[],
      ageTypetext:"",
      sexTypetext:"",
      pageConfig:null,
      token:"",
      nt:'',
      checkno:'',
      hoscode:'',
      checkdate:'',
      rules: {         
         name: [{ required: true, message: "请输入名称"}],
         sex: [{ required: false, message: "请选择性别", trigger: "change" }],
         mobile: [{ required: false, message: "请输入电话"},
                  { pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/, message: '请输入正确的11位手机号!'}
                 ],
         hospitalizationNo: [{ required: false, message: "请输入住院号", trigger: "change" }],
         bedNo: [{ required: false, message: "请输入床位", trigger: "change" }],
         outpatientServiceNo: [{ required: false, message: "请输入门诊号", trigger: "change" }],
         inspectionarea: [{ required: false, message: "请输入检查部位", trigger: "change" }],
         weight: [{ required: false, message: "请输入体重", trigger: "change" }],
         idCard: [{ required: false, message: "请输入身份证号", trigger: "change" },
                  { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'change' }
                 ],
         age: [{ required: false, message: "请输入年龄", trigger: "change" },
         { pattern: /^(?:[1-9][0-9]?|1[01][0-9]|150)$/, message: '请输入0-150范围内的数值!', trigger: 'change' }  
       ],
         modality: [{ required: false, message: "请输入检查类型", trigger: "change" }],
         applyDepartmentName: [{ required: false, message: "请输入申请科室", trigger: "change" }],
         sendDoctor: [{ required: false, message: "请输入送检医生", trigger: "change" }],
         applyDoctorName: [{ required: false, message: "请输入申请医生", trigger: "change" }],
         clinicalDiagnosis: [{ required: false, message: "请输入.临床诊断", trigger: "change" }],
       },
    
    };
  },
  mounted() {
    // 增加缓存语句
    this.id = this.$route.query.id;
    this.token = this.$route.query.token;
    this.nt = this.$route.query.nt;
    this.checkno = this.$route.query.checkno;
    this.hoscode = this.$route.query.hoscode;
    this.checkdate = this.$route.query.checkdate;
 
    this.initAjaxMethod();
    // this.getType();
    // this.baseAjaxMethod(); //  :value-key="label"
    // let agetype=[{'id':1,'name':'岁','value':'岁'},{'id':2,'name':'周','value':'周'}];
    // <el-option label="岁" value="1" />
    //                 <el-option label="月" value="2" />
    //                 <el-option label="周" value="3" />
    //                 <el-option label="天" value="4" />
  // let agetype=['岁','月','周','天'];
  let agetype=[ {value: 1, label: '岁'},{value: 2,label: '月'},
        {value: 3, label: '周' },{value: 4,label: '天'}
      ]
   
   this.agetypelist=agetype;
   let sexype=[ {value: 0, label: '男'},{value: 1,label: '女'}]
   
   this.pageConfig=sexype;

   let checkType=[ {value: 1, label: 'CT'},{value: 2,label: 'CR'},{value: 3,label: 'DR'},
   {value: 4, label: 'DX'}, {value: 5, label: 'MRI'}, {value: 6, label: 'SR'}]
   this.checktypelist=checkType;

  },
  methods: {
    onConfirm(e){
      this.checkTypetext=e.label;
      this.reportDetail.checkType=e.value;
 
      // this.reportDetail.modality=e;      
      this.showPicker=false;
    },
    onConfirm1(e){
      console.log(e);
      this.ageTypetext=e.label;
      this.reportDetail.ageType=e.value;
      this.agesPicker=false;
    },
    initAjaxMethod() {

      if(this.hoscode==""){
        Toast.fail("缺少医院ID");return false;
      }

      if(this.checkdate==""){
        Toast.fail("缺少检查日期");return false;
      }
      let storsysuform=this.id+"_uform";

      let forminfostr=sessionStorage.getItem(storsysuform);       
        if(forminfostr){
          let forminfo=JSON.parse(forminfostr);
          this.reportDetail=JSON.parse(forminfostr);
     
       
          console.log("huancun",forminfo)
          
        }else{

          const loading = this.$loading({ text: "加载中" });
          let para={ zid: this.id,token: this.token,nt: this.nt,checkno: this.checkno,hoscode: this.hoscode,checkdate:this.checkdate };
          let url=this.$API.MOBILE_REPORT_DETAILv2;
          url+=this.id;
          // , para
          this.$http
                  .get(url)
            .then((res) => {
              loading.close();
              console.log("登录信息", res);
              if (res.code == 200) {
                // res.data.ageType=res.data.ageType || '岁'
                 if(res.data.ageType){
                    this.agetypelist[res.data.ageType-1];
                    this.ageTypetext=this.agetypelist[res.data.ageType-1]['label'];

                 }

                 if(res.data.checkType){
                    this.checktypelist[res.data.checkType-1];
                    this.checkTypetext=this.checktypelist[res.data.checkType-1]['label'];

                 }
               

                this.reportDetail = res.data;
              }else{
                Toast.fail(res.msg);
              }
            });
 
        }
     
        // console.log("xx11",data);



    
    },
    onSubmit(values) {
    

      let mobile=this.reportDetail.mobile;
      let idCard=this.reportDetail.idCard;
      let age=this.reportDetail.age;
 
       if(!(/^(?:[1-9][0-9]?|1[01][0-9]|150)$/.test(age))){ 
            return this.$message.error('请输入0-150范围内的年龄数值!');return false;
        } 
  
        if(mobile){
            if(!(/^1[123456789]\d{9}$/.test(mobile))){ 
              return this.$message.error('请输入正确的11位手机号!');return false;
          } 
        }
      
        if(idCard){
          if(!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(idCard))){ 
            // return this.$message.error('请输入正确的身份证号！');return false;
        } 
        }
  
  
      Toast.loading({ message: "加载中...", forbidClick: true });

      this.$http
        .put(this.$API.MOBILE_REPORT_EDITv2, this.reportDetail)
        .then((res) => {
          Toast.clear();
          if (res.code == 200) {
            let storsysuform=this.id+"_uform";
            sessionStorage.setItem(storsysuform,'');// 清除缓存
            Toast.success('操作成功');
          }else{
            Toast.fail('操作失败');
          }
        })
    },


    getType() {
      this.$http.get(this.$API.SELFTEMP_TYPE).then((res) =>{
        if(res.code == 1){
          let list =res.data && Array.isArray(res.data.checktypelist)? res.data.checktypelist: [];
          this.checktypelist=list.map(o=>o.name);
        }
      });
    },
    baseAjaxMethod(){
      this.$http.post(this.$API.GET_BASE_INFO)
        .then((res) => {
          if (res.code == 1) {
            let list = Array.isArray(res.data.list) ? res.data.list : [];
            let typeList=_.uniq(list.map(o=>o.type)),config={};
            typeList.forEach(item=>{
              config[item]=[];
              list.forEach(val=>{
                if(val.type === item){
                  config[item].push(val)
                }
              })
            })
            this.pageConfig=config;
            this.agetypelist=config['age'] && Array.isArray(config['age'])?config['age'].map(item=>item.name):[];
          }
        });
    },
    funsave(){
      // 浏览器缓存   this.reportDetail
      let storsysuform=this.id+"_uform";
      let forminfo=sessionStorage.setItem(storsysuform,JSON.stringify(this.reportDetail));
      //let uinfostr=localStorage.getItem('uform');
      let forminfostr=sessionStorage.getItem(storsysuform);

      if(forminfostr){
        // let forminfo=JSON.parse(forminfostr);
        // let data=JSON.parse(forminfostr);
        // console.log(forminfo) 

      }else{
        // let forminfo=sessionStorage.setItem('uform',JSON.stringify(this.ruleForm));
      }
    //   localStorage.setItem('uform', JSON.stringify(this.ruleForm) );
    //  let uinfo=localStorage.getItem('uform'); 
      // console.log(forminfostr);
    },

  },
};
</script>
<style lang="less" scoped>
.mobile-home {
  height: 100%;

  .mobile-home-list {
    height: calc(100vh - 98px);
  }

  .list-cell {
    padding: 0 16px;
  }

  .list-card {
    background: #ffffff;
    box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px;
    margin-top: 16px;
  }

  .list-header {
    padding: 8px 0;
    display: flex;
    align-items: center;
  }

  .list-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
  }
  .qrcode-group {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 200px;
      height: 200px;
    }
  }
}
</style>
<style>
.mobile-home .list-footer .van-button {
  width: 70px;
}
</style>
